import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect, useRef } from 'react';
import { TableOutlined, DeleteOutlined, ShareAltOutlined, ImportOutlined, ExportOutlined, InfoCircleOutlined, NodeIndexOutlined, ApartmentOutlined, PartitionOutlined, ProfileOutlined } from '@ant-design/icons';
import { EllipsisOutlined, PlusOutlined, MinusOutlined, EditOutlined, MoreOutlined } from '@ant-design/icons';

import { ToolsHeader, ObjectRelationGraph, getLayoutedElements } from '../../../../components';
import { metaDataGetObjectRelationsByType, MetaDataObjectRelation, metaDataRemoveObjectProperty, metaDataSaveObjectProperty } from '../../../../services';

export interface MetaDataObjectCompositionPanelProps {
    style?: CSSProperties;
    objectIdentifier: string;
}

export const MetaDataObjectCompositionPanel: React.FC<MetaDataObjectCompositionPanelProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [nodes, setNodes] = useState([]);

    const [edges, setEdges] = useState([]);

    const [version, setVersion] = useState<number>(0);

    const refresh = async (objectIdentifier: string) => {
        setLoading(true);
        //拥有
        let relations = await metaDataGetObjectRelationsByType(props.objectIdentifier, '组合');

        let nodes = [{
            id: props.objectIdentifier,
            data: { label: props.objectIdentifier },
            type: 'default',
        }].concat(relations.map((item, index) => {
            if (item.srcIdentifier === props.objectIdentifier) {
                return {
                    id: item.targetIdentifier,
                    data: { label: item.targetObjectName || item.targetIdentifier },
                    type: 'output'
                };
            } else {
                return {
                    id: item.srcIdentifier,
                    data: { label: item.srcObjectName || item.srcIdentifier },
                    type: 'input'
                };
            }
        }));

        let edges = relations.map((item, index) => {
            let label = '';
            if (item.srcIdentifier === props.objectIdentifier) {
                label = '拥有';
            } else {
                label = '拥有';
            }
            return {
                id: `${item.srcIdentifier}-${item.targetIdentifier}`,
                source: item.srcIdentifier,
                target: item.targetIdentifier,
                label: label,
                animated: true
            };
        });

        let layout = getLayoutedElements(nodes, edges, 'TB');
        setNodes(layout.nodes);
        setEdges(layout.edges);
        setTimeout(() => {
            setVersion(new Date().getTime());
        }, 100);

        setLoading(false);
    };

    useEffect(() => {
        refresh(props.objectIdentifier);
    }, [props.objectIdentifier]);

    if (loading) {
        return (
            <Container style={props.style}>

            </Container>
        );
    }

    return (
        <Container style={props.style}>
            <ObjectRelationGraph
                style={{
                    flex: 1
                }}
                nodes={nodes}
                edges={edges}
                version={version}
                tools={<ToolsHeader
                    activeKey={''}
                    leftItems={[
                        {
                            key: '添加',
                            label: '添加',
                            icon: <PlusOutlined />,
                        },
                        {
                            key: '删除',
                            label: '删除',
                            icon: <MinusOutlined />,
                        },
                        {
                            divider: true,
                        }
                    ]}
                    centerItems={[
                        {
                            key: 'AI',
                            label: 'AI',
                            icon: <MinusOutlined />,
                        }
                    ]}
                    rightItems={[

                    ]}
                    onChange={async (key: string, isAction?: boolean) => {
                        if (isAction) {
                            //删除
                        } else {
                        }
                    }}></ToolsHeader>}
            ></ObjectRelationGraph>
        </Container>
    );
}


const Container = styled.div`
    flex:  1;
    width: 100%;
`;
